<template>
    <div>
        <el-dialog :title="Id == undefined ? '新增' : '修改'" :visible.sync="deitOpen" width="36%"
            :before-close="closeDelDialog">
            <el-form ref="addForm" :model="addForm" :rules="rules" label-width="140px" style="margin:20px 20px 0">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="档案门类" prop="categoryId">
                            <treeselect v-model="addForm.categoryId" :options="options" label placeholder="请选择门类"
                                @select="onChangeTap($event)" :disable-branch-nodes="true"
                                :normalizer="normalizerCategoryID" />
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="任务名称" prop="taskName">
                            <el-input v-model="addForm.taskName" placeholder="请输入任务名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="四性标识" prop="schemeId">
                            <el-select v-model="addForm.schemeId" @change="selectChange" placeholder="请选择四性标识" clearable
                                style="width: 100%">
                                <el-option v-for="item in sxjcList" :key="item.id" :label="item.identification"
                                    :value="item.id" />
                            </el-select>

                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="定时任务表达式" prop="timeDtask">
                            <div style="display: flex;">
                                <el-input v-model="addForm.timeDtask" class="inp" placeholder="请选择cron表达式"></el-input>
                                <el-button type="primary" @click="showDialog" style="margin-left: 10px;" size="mini">生成
                                    cron</el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="状态" prop="status">
                            <el-switch v-model="addForm.status" :active-value="1" :inactive-value="0"></el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
                <el-button @click="closeDelDialog">取 消</el-button>
            </div>

        </el-dialog>

        <!--start cron 正则 -->
        <el-dialog title="生成 cron" :visible.sync="showCron" width="40%">
            <vcrontab @hide="showCron = false" @fill="crontabFill" :expression="expression"></vcrontab>
        </el-dialog>
        <!--end cron 正则 -->
    </div>
</template>
<script>
import vcrontab from "vcrontab"; //icon表达式插件
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listGROUPTree } from "@/api/archive/archivesCategory.js";
import { getdetectionSchemeList } from '@/api/archive/archiveTransfer/archiveTransfer.js'
import { regularInspections, regularInspectionsInfo, regularInspectionsDeit } from '@/api/cqbc/inspectionData/inspection.js'
export default {
    watch: {
        Id: {
            handler(val) {
                if (val != undefined) { //修改
                    regularInspectionsInfo(val).then(res => {
                        this.getdetectionSchemeListPOSTUP(res.data.categoryId)
                        res.data.status = parseInt(res.data.status)
                        this.addForm = res.data;

                    })
                }
            },
            immediate: true
        }
    },
    props: ["deitOpen", "Id"],
    components: {
        Treeselect, vcrontab
    },
    data() {
        return {
            expression: "",
            showCron: false,
            options: [],
            sxjcList: [],
            addForm: {
                categoryId: undefined,
                taskName: undefined,
                schemeCode: undefined,
                timeDtask: undefined,
                status: undefined,
                schemeId: undefined,
            },
            rules: {
                categoryId: [
                    { required: true, message: "请选择档案门类", trigger: "blur" }
                ],
                taskName: [
                    { required: true, message: "请输入任务名称", trigger: "blur" }
                ],
                schemeId: [
                    { required: true, message: "请选择四性标识", trigger: "blur" }
                ],
                timeDtask: [
                    { required: true, message: "请选择定时任务表达式", trigger: "blur" }
                ],

            },

        }
    },
    created() {
        this.categorylistPOST();
    },
    methods: {
        //测试Cron 表达式
        isValidCronExpression(expression) {
            // 基本的Cron表达式正则表达式校验
            var reg=new RegExp("^\\s*($|#|\\w+\\s*=|(\\?|\\*|(?:[0-5]?\\d)(?:(?:-|\/|\\,)(?:[0-5]?\\d))?(?:,(?:[0-5]?\\d)(?:(?:-|\/|\\,)(?:[0-5]?\\d))?)*)\\s+(\\?|\\*|(?:[01]?\\d|2[0-3])(?:(?:-|\/|\\,)(?:[01]?\\d|2[0-3]))?(?:,(?:[01]?\\d|2[0-3])(?:(?:-|\/|\\,)(?:[01]?\\d|2[0-3]))?)*)\\s+(\\?|\\*|(?:0?[1-9]|[12]\\d|3[01])(?:(?:-|\/|\\,)(?:0?[1-9]|[12]\\d|3[01]))?(?:,(?:0?[1-9]|[12]\\d|3[01])(?:(?:-|\/|\\,)(?:0?[1-9]|[12]\\d|3[01]))?)*)\\s+(\\?|\\*|(?:[1-9]|1[012])(?:(?:-|\/|\\,)(?:[1-9]|1[012]))?(?:L|W)?(?:,(?:[1-9]|1[012])(?:(?:-|\/|\\,)(?:[1-9]|1[012]))?(?:L|W)?)*|\\?|\\*|(?:JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC)(?:(?:-)(?:JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC))?(?:,(?:JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC)(?:(?:-)(?:JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC))?)*)\\s+(\\?|\\*|(?:[0-6])(?:(?:-|\/|\\,|#)(?:[0-6]))?(?:L)?(?:,(?:[0-6])(?:(?:-|\/|\\,|#)(?:[0-6]))?(?:L)?)*|\\?|\\*|(?:MON|TUE|WED|THU|FRI|SAT|SUN)(?:(?:-)(?:MON|TUE|WED|THU|FRI|SAT|SUN))?(?:,(?:MON|TUE|WED|THU|FRI|SAT|SUN)(?:(?:-)(?:MON|TUE|WED|THU|FRI|SAT|SUN))?)*)(|\\s)+(\\?|\\*|(?:|\\d{4})(?:(?:-|\/|\\,)(?:|\\d{4}))?(?:,(?:|\\d{4})(?:(?:-|\/|\\,)(?:|\\d{4}))?)*))$"
)
            return reg.test(expression);
        },
        selectChange(val) {
            var row = this.sxjcList.filter(item => item.id == val);
            this.addForm.schemeCode = row[0].identification
        },
        // 只能选择数据下面有children 的数据，没有children的时候禁用
        normalizerCategoryID(node) {
            if (node.nodeType == 'fonds') {
                if (node.children == undefined || node.children == null || !node.children.length) {

                    node['isDisabled'] = true;
                }

            }
            if (node.children == null || node.children == undefined || !node.children.length) {
                delete node.children;
            }
            return node
        },

        //档案门类树列表
        categorylistPOST() {
            listGROUPTree().then(response => {
                this.options = response.data;
            });

        },
        onChangeTap(val) {
            this.sxjcList = [];
            this.addForm.categoryId = undefined;
            this.addForm.schemeId=undefined;
            this.getdetectionSchemeListPOST(val)
        },
        /**四性检测方案列表 */
        getdetectionSchemeListPOST(val) {
            getdetectionSchemeList({
                state: "1", //1开启 0未开启
                phase: "2",
                categoryId: val.id,
            }).then(res => {
                this.sxjcList = res.rows;
            })
        },
        /**四性检测方案列表 */
        getdetectionSchemeListPOSTUP(val) {
            getdetectionSchemeList({
                state: "1", //1开启 0未开启
                phase: "2",
                categoryId: val,
            }).then(res => {
                this.sxjcList = res.rows;
            })
        },
        crontabFill(value) {
            //确定后回传的值
            this.addForm.timeDtask = value;
        },
        showDialog() {
            this.expression = this.addForm.timeDtask;//传入的 cron 表达式，可以反解析到 UI 上
            this.showCron = true;
        },
        closeDelDialog() {
            this.$emit("closeDelDialog")
        },
        submitForm(addForm) {
            this.isValidCronExpression(this.addForm.timeDtask)
            console.log(this.isValidCronExpression(this.addForm.timeDtask)); // false
            if(!this.isValidCronExpression(this.addForm.timeDtask)){
                this.$modal.msgError("请输入正确的表达式");
                return;
            }
            this.$refs[addForm].validate((valid) => {
                if (valid) {
                    if (this.Id == undefined) {
                        regularInspections(this.addForm).then(res => {
                            if (res.code == "200") {
                                this.$modal.msgSuccess("添加成功");
                                this.$emit("addsubmitForm")
                            }
                        })
                    } else {
                        regularInspectionsDeit(this.addForm).then(res => {
                            if (res.code == "200") {
                                this.$modal.msgSuccess("修改成功");
                                this.$emit("addsubmitForm")
                            }
                        })

                    }

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },


    }
}

</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}
</style>

